import { OwnspaceModelState } from '@/models/ownspace';
import { useEffect } from 'react';
import { Tabs, Form, Input, Button, Avatar } from 'antd';
import { ArticleModelState, useDispatch, useSelector } from 'umi';
import styles from './index.less';
import CommentFoot from '@/components/commonFooter';
import { UserOutlined } from '@ant-design/icons';
const { TabPane } = Tabs;
export default function Ownspace() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'workbench/getArticleList',
    });
    dispatch({
      type: 'workbench/getCommentList',
    });
    dispatch({
      type: 'ownspace/getCategoryList',
    });
    dispatch({
      type: 'ownspace/getTagList',
    });
    dispatch({
      type: 'ownspace/getFileList',
    });
  }, []);

  const { categoryList, tagList, fileList } = useSelector(  (state: { ownspace: OwnspaceModelState }) => state.ownspace,);
  const { articleListLength, commentListLength } = useSelector(  (state: { workbench: ArticleModelState }) => state.workbench,);
  const onFinish = (values: any) => {  console.log('Success:', values);};
  const onFinishFailed = (errorInfo: any) => {  console.log('Failed:', errorInfo);};
  const user = JSON.parse(localStorage.getItem('user')!);
  console.log(user,'**************************');
  
  return (
    <div className={styles.ownspace}>
      {/* 个人中心——头部 */}
      <div className={styles.ownspace_head}></div>
      {/* 个人中心——内容 */}
      <div className={styles.ownspace_center}>
        <div className={styles.ownspace_flex}>
          {/* 系统概览 */}
          <div className={styles.ownspace_box}>
            <div className={styles.ownspace_box_list}>
              <div className={styles.listtitle}>系统概览</div>
              <div>
                <ul>
                  <li className={styles.listitem}>
                    累计发表了{articleListLength}篇文章
                  </li>
                  <li className={styles.listitem}>
                    累计创建了{categoryList.length}个分类
                  </li>
                  <li className={styles.listitem}>
                    累计创建了{tagList.length}个标签
                  </li>
                  <li className={styles.listitem}>
                    累计上传了{fileList}个文件
                  </li>
                  <li className={styles.listitem}>
                    累计获得了{commentListLength}个评论
                  </li>
                </ul>
              </div>
            </div>
          </div>
          {/* 个人资料 */}
          <div  className={styles.ownspace_box}  style={{ paddingLeft: 8, paddingRight: 8 }}>
            <div className={styles.ownspace_box_list}>
              <div className={styles.listtitle}>个人资料</div>
              <div className={styles.listtab}>
                <Tabs defaultActiveKey="1" size="large">
                  {/* 基本设置 */}
                  <TabPane tab="基本设置" key="1">
                    <Form
                      name="basic"
                      labelAlign="left"
                      labelCol={{ span: 3 }}
                      wrapperCol={{ span: 15 }}
                      initialValues={{ remember: true }}
                      onFinish={onFinish}
                      onFinishFailed={onFinishFailed}
                      autoComplete="off"
                      size="large"
                      className={styles.form}
                    >
                      <Form.Item style={{ textAlign: 'center' }}>
                        {user && user.avatar ? (
                          <Avatar
                            src={user.avatar}
                            style={{  width: 64,  height: 64,  lineHeight: 64,  fontSize: 18,}}
                          />
                        ) : (
                          <Avatar
                            icon={<UserOutlined />}
                            style={{  width: 64,  height: 64,  lineHeight: 64,  fontSize: 18,}}
                          />
                        )}
                      </Form.Item>
                      <Form.Item label="用户名" name="username">
                        <Input defaultValue={user.name} />
                      </Form.Item>

                      <Form.Item 
                        label="邮箱" 
                        name="email" 
                      >
                        <Input placeholder="请输入邮箱" />
                      </Form.Item>
                      <Form.Item>
                        <Button type="primary" htmlType="submit">
                          保存
                        </Button>
                      </Form.Item>
                    </Form>
                  </TabPane>
                  {/* 更新密码 */}
                  <TabPane tab="更新密码" key="2">
                    <Form
                      name="basic"
                      labelAlign="left"
                      labelCol={{ span: 3 }}
                      wrapperCol={{ span: 19 }}
                      initialValues={{ remember: true }}
                      onFinish={onFinish}
                      onFinishFailed={onFinishFailed}
                      autoComplete="off"
                      size="large"
                      className={styles.form}
                    >
                      <Form.Item label="原密码" name="oldpassword">
                        <Input.Password placeholder="请输入原密码" />
                      </Form.Item>

                      <Form.Item label="新密码" name="newpassword">
                        <Input.Password placeholder="请输入新密码" />
                      </Form.Item>

                      <Form.Item label="确认密码" name="newpassword">
                        <Input.Password placeholder="请输入新密码" />
                      </Form.Item>
                      <Form.Item>
                        <Button type="primary" htmlType="submit">
                          更新
                        </Button>
                      </Form.Item>
                    </Form>
                  </TabPane>
                </Tabs>
              </div>
            </div>
          </div>
        </div>
        <CommentFoot />
      </div>
    </div>
  );
}
